<!--
 * @Author: wangshuixin 2412658453@qq.com
 * @Date: 2024-10-29 14:32:01
 * @LastEditors: wangshuixin 2412658453@qq.com
 * @LastEditTime: 2024-12-21 15:00:07
 * @FilePath: \web-components-box\components\Formula\components\FormulaItem.vue
 * @Description: 表达式的项
-->
<script setup lang="ts">
import FractionItem from './FractionItem.vue'
import type { ExpressionTerm, FractionTerm, VariableTermElement } from '~/types/equation'

const props = defineProps({
  data: { // 公式每一项的显示数据
    type: Object as () => ExpressionTerm,
    required: true,
  },
})
// 整理后的数据
const formattedData = ref<FractionTerm[]>([])

watch(
  () => props.data,
  () => {
    if (props.data.constant) {
      formattedData.value = formatConstant(props.data)
    }
  }, {
    immediate: true
  }
)
</script>

<template>
  <div class="formulaItem">
    <div>{{ getSymbol(props.data.type) }}</div>
    <!-- 常量 -->
    <div class="flex flex-row">
      (<FractionItem :data="formattedData"/>)
    </div>
  </div>
</template>

<style scoped lang="less">
.formulaItem {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
}
</style>